<template>
    <div class="container">
        <el-form 
            :model="LoginForm" 
            status-icon 
            :rules="rules" 
            ref="ruleForm"
            label-width="70px"
            class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input 
                    type="txt" 
                    v-model="LoginForm.username" 
                    suffix-icon="el-icon-user"
                    placeholder="请输入用户名"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input 
                    :type="flagType" 
                    v-model="LoginForm.password"
                    placeholder="请输入密码"
                >
                <i slot="suffix" class="icon_yanjing"
                    :class="flag? 'el-icon-microphone' : 'el-icon-turn-off-microphone'" 
                    @click="getFlag()"
                />
                </el-input>
            </el-form-item>
            <div class="btn">
                <el-button type="success" @click="submitForm">登录</el-button>
                <el-button @click="resetForm()" type="warning">重置</el-button>
            </div>
            <div class="link_register">
                <el-checkbox v-model="checked" @change="remeberPassword">记住密码</el-checkbox>
                <span @click="jumpRegister" class="reg_jump">还没账号，去注册></span>
            </div>
        </el-form>
    </div>
</template>

<script>
import CryptoJS from "crypto-js";
export default {
    data() {
        return {
            checked: true,
            flag: false,
            flagType: "password",
            LoginForm: {
                username: "",
                password: "",
            },
            rules: {
                username: [
                    { required: true, message: "用户名不能为空", trigger: 'blur' },
                    { min: 5, max: 12, message: "用户名长度为5-12个字符", trigger: 'blur' }
                ],
                password: [
                    { required: true, message: "密码不能为空", trigger: 'blur' },
                    { min: 8, max: 20, message: "密码长度为8-20个字符", trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        submitForm() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    const { data: res } = await this.$http.post('/user/login', this.LoginForm)
                    if (res.status !== 200) {
                        return this.$message.error(res.message);
                    } else {
                        window.sessionStorage.setItem('Username', this.LoginForm.username)
                        window.sessionStorage.setItem('token', res.token)
                        this.$router.push('/admin')
                        this.$message({
                            message: '登录成功！',
                            type: 'success'
                        })
                    }
                } else {
                    this.$message.error('输入数据非法，请重新输入')
                }
            });
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
        getFlag() {
            this.flag = !this.flag
            this.flagType = this.flag ? "text" : "password"
        },
        jumpRegister() {
            this.$router.push("/register")
        },
        remeberPassword() {
            if (this.checked) {
                this.$cookie.set("username", this.LoginForm.username, {
                    expires: 3
                });
                this.$cookie.set(
                    "password",
                    CryptoJS.AES.encrypt(this.LoginForm.password, "123456"),
                    {
                        expires: 3
                    }
                )
            } else {
                this.$cookie.remove("username")
                this.$cookie.remove("password")
            }
        },
        getCookie() {
            this.LoginForm.username = this.$cookie.get("username")
            if (this.$cookie.get("password")) {
                this.LoginForm.password = CryptoJS.AES.decrypt(
                    this.$cookie.get("password"),
                    "123456"
                ).toString(CryptoJS.enc.utf8);
            } else {
                this.LoginForm.username = "";
            }
        }
    },
    mounted() {
        this.getCookie();
    }
}
</script>

<style scoped>
.container {
    background-image: url(../assets/login_bg.jpg);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}
.demo-ruleForm {
    width: 400px;
    height: 250px;
    background-color: rgba(1, 7, 28, 0.6);
    position: absolute;
    top: 60%;
    left: 80%;
    transform: translate(-50%, -50%);
    border-radius: 9px;
}
.el-form-item{
    margin-left: 20px;
    margin-top: 25px;
    width: 380px;
}
.el-form >>> .el-form-item__label {
  text-align: justify;
  text-align-last: justify;
}
.el-form >>> .el-form-item.is-required .el-form-item__label:before {
    content: none !important;
}
.el-input{
    width: 300px;
}
.btn{
    margin-top: 20px;
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
}
.link_register {
    color: rgb(241, 151, 5);
    margin-top: 10px;
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
    vertical-align: middle;
}
.el-checkbox {
    color: #fff;
}
.el-button {
    padding: 12px 36px;
}
.reg_jump {
    font-size: 14px;
    margin-left: 10px;
    cursor: pointer;
}
.icon_yanjing {
    padding-right: 5px;
}
</style>